<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/assets/jquery/jquery-3.1.1.min.js"></script>
<script src="/assets/layui-2.9.18/layui.js"></script>
<link rel="stylesheet" href="/assets/layui-2.9.18/css/layui.css">
<link rel="stylesheet" href="/assets/layui-2.9.18/css/admin.css">
<script src="/assets/september/common.js"></script>
<script src="/assets/september/htmlBuilder.js"></script>
<script src="/assets/september/search.js"></script>
<link rel="stylesheet" href="/assets/pages/form.css">

<script src="/assets/jstree-3.3.17/jstree.min.js"></script>
<link rel="stylesheet" href="/assets/jstree-3.3.17/themes/default/style.min.css"/>
<style>
    em {
        color: red
    }
</style>
</head>
<body class="layui-layout-body">
<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <!-- 主体内容 -->
            <div class="layui-fluid" style="height: 100%">
                <div class="layui-card" style="height:600px">
                    <div class="tree-wrap" style="height:100%;width: 35%;float:left;overflow-y: scroll;">
                        <div id="regionTree"></div>
                    </div>
                    <div class="layui-card-body" style="  width: 60%; margin-left: 35%;">
                      <div id="form" class="layui-table-box layui-form" style="display:none;">
						<span id="addAnddelete" style="display:none;">
						<input type="button" class="layui-btn layui-btn-normal" onclick="deleteRegion()" value="删除"
                               style="float:right">
						<input type="button" class="layui-btn layui-btn-normal" onclick="addRegion()" value="添加"
                               style="float:right; margin-right: 10px;">
						</span>
                            <div class="layui-form-item">
                                <label class="layui-form-label">上级区域<em class="required">*</em>
                                </label>
                                <div class="layui-input-inline">
                                    <input id="parentName" disabled readonly type="text" style="background: #eee;"
                                           class="layui-input">
                                    <input id="parentId" name="parentId" type="hidden" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">区域名称<em class="required">*</em>
                                </label>
                                <div class="layui-input-inline">
                                    <input id="name" name="name" type="text" value="" lay-verify="required"
                                           class="layui-input">
                                    <input id="id" name="id" type="hidden" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">区域编码<em class="required">*</em>
                                </label>
                                <div class="layui-input-inline">
                                    <input id="zipCode" name="zipCode" type="text" value="" lay-verify="required"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">区域类别<em class="required">*</em></label>
                                <div class="layui-input-inline">
                                    <select name="type" id="type" lay-verify="required">
                                        <option value="1">省级</option>
                                        <option value="2">市级</option>
                                        <option value="3">区县级</option>
                                        <option value="4">乡镇级</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-inline">
                                    <input id="remark" name="remark" type="text" value="" lay-verify="required"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" style="height:100px;">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                </div>
                            </div>

                            <input type="button" class="layui-btn layui-btn-normal"
                                   style="float: right;margin-left: 20px" onclick="doSaveOrUpdate()" value="保存"/>
                            <input type="button" class="layui-btn layui-btn-normal"
                                   style="float: right;margin-left: 20px"
                                   id="enableFlag" onclick="doUpdateEnableFlag()" value=""/>
                            <input id="setting" type="button" class="layui-btn layui-btn-normal" style="float: right;"
                                   onclick="setMainRegion()" value="设为主地区"/>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主体内容结束-->
    </div>
</div>
<#assign enableFlag="0">
<#include "./regionTree.ftl">
<script type="text/javascript">
    const CLOSE = "关闭地区";
    const OPEN = "开启地区";
    var currentId;
    var currentName;
    var tree;
    var mode = 'update';
	function onTreeFinish(){
		layui.use(function(){
	        $('#form').hide();
	        var form = layui.form;
	        tree.on('changed.jstree', function (e, data) {
	            $('#form').show();
	            //当前选中节点的id
	            currentId = data.instance.get_node(data.selected[0]).id;
	            //当前选中节点的文本值
	            currentName = data.instance.get_node(data.selected[0]).text;
	
	            var parentId = data.node.parent;
	            var parentName = data.instance.get_node(parentId).text;
	
	            $('#id').val(currentId);
	            $('#name').val(currentName);
	
	            $('#parentId').val(parentId);
	            $('#parentName').val(parentName);
	            if (data.instance.get_node(data.selected[0])) {
	                let attr = data.instance.get_node(data.selected[0]).a_attr;
	                $('#type').val(attr.type);
	                /**
	                if (attr.type == 3) {
	                    $('#setting').css('display', 'block');
	                } else {
	                    $('#setting').css('display', 'none');
	                }
					**/
	                $('#remark').val(attr.remark);
	                $('#zipCode').val(attr.zipCode);
	                // 请求获得
	                getFlag();
	            }
	            form.render();
	            mode = 'update';
	            $('#addAnddelete').show();
	            $('#form').show();
	        });
	        
	    });
	}

	function getFlag() {
        sajax({
            type: "POST",
            url: "/pisces/region/getFlag",
            data: {id: currentId},
            dataType: 'json',
            success: function (enableFlag) {
                $('#enableFlag').val(enableFlag === 0 ? OPEN : CLOSE);
            }
        });
    }
        
    function addRegion() {
        $('#parentId').val(currentId);
        $('#parentName').val(currentName);
        $('#id').val('');
        $('#name').val('');
        currentId = null;
        currentName = null;
        mode = 'add';
        $('#addAnddelete').hide();
    }

    function deleteRegion() {
        confirmDelete(function () {
            sajax({
                type: "POST",
                url: "/pisces/region/delete",
                data: {id: currentId},
                dataType: 'json',
                success: function (data) {
                    if (data.code == -1) {
                        layer.msg(data.desc);
                    } else {
                        layer.msg('删除成功');
                        //更新树
                        var xx = tree.jstree(true);
                        xx.delete_node(xx.get_node(currentId));
                    }
                }
            });
        });
    }

    function setMainRegion() {
        sajax({
            type: "POST",
            url: "/pisces/region/setMainRegion",
            data: {regionId: currentId},
            dataType: 'json',
            success: function (data) {
                if (data.code == -1) {
                    layer.msg(data.desc);
                } else {
                    layer.msg('保存成功');
                }
            }
        });
    }

    function doSaveOrUpdate() {
        var remark = $('#remark').val();
        var zipCode = $('#zipCode').val();
        if (mode == 'add') {
            //add
            var name = $('#name').val();
            var typeVal = $('#type').val();
            sajax({
                type: "POST",
                url: "/pisces/region/doAddRegion",
                data: {parentId: $('#parentId').val(), type: typeVal, name: name, remark: remark, zipCode: zipCode},
                dataType: 'json',
                success: function (data) {
                    if (data.code == -1) {
                        layer.msg(data.desc);
                    } else {
                        layer.msg('保存成功');
                        //更新树
                        var jsTree = $('#regionTree').jstree(true);
                        jsTree.create_node($('#parentId').val(), {
                            'id': data,
                            'text': name,
                            'a_attr': {'type': typeVal, 'remark': remark}
                        }, 'last');
                    }
                }
            });
        } else {
            sajax({
                type: "POST",
                url: "/pisces/region/doUpdateRegion",
                data: {
                    parentId: $('#parentId').val(),
                    id: $('#id').val(),
                    type: $('#type').val(),
                    name: $('#name').val(),
                    remark: remark,
                    zipCode: zipCode
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == -1) {
                        layer.msg(data.desc);
                    } else {
                        layer.msg('保存成功');
                        //更新树
                        var xx = tree.jstree(true);
                        xx.set_text(xx.get_node(currentId), $('#name').val());
                        xx.get_node(currentId).a_attr.remark = remark;
                        xx.get_node(currentId).a_attr.type = $('#type').val();
                    }
                }
            });
        }

    }

    function doUpdateEnableFlag() {
        console.log("currentId" + currentId)
        if (!currentId) {
            return false;
        }
        var enableTxt = $('#enableFlag').val();
        var enableFlag = enableTxt === OPEN ? 1 : 0;
        layer.confirm('提交后将影响该地区所有下属地区，是否' + enableTxt + `？`, {
            btn: ['是', '否']
            //按钮
        }, function (index) {
            sajax({
                type: "POST",
                url: "/pisces/region/doUpdateEnableFlag",
                data: {id: $('#id').val(), enableFlag: enableFlag},
                dataType: 'json',
                success: function (data) {
                    if (data.code == -1) {
                        layer.msg(data.desc);
                    } else {
                        layer.msg('保存成功');
                        $('#enableFlag').val(enableFlag === 0 ? OPEN : CLOSE);
                    }
                }
            });

        }, function () {
            //no
        });


    }

</script>

</body>
</html>
